<template>
    <div>
        <!-- 顶部 -->
        <div class="head">
            <div class="head-in warp">
                <div class="head-l">
                    <span class="text">
                        欢迎来到叩丁狼积分商城
                    </span>
                </div>
                <div class="head-r">
                    <div class="img">
                        <img src="../assets/img/userImg.f8bbec5e.png" alt="" width="23px" height="22px">
                        <span>用户名：游客</span>
                    </div>
                    <div>
                        <span>我的积分：--</span>
                    </div>
                    <div>
                        <span>获取积分{{isLoginStatus}}</span>
                    </div>
                    <div>
                        <span>叩丁狼官网</span>
                    </div>
                    <div>
                        <span class="login" @click="changeIsShowLoginModel(true)" v-if="isLoginStatus">登录</span>
                        <li class="cart-btn" v-else >
   <img src="../assets/img/cart.png" alt="" />
   <span>购物车</span>
   <strong>5</strong>
</li>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容导航 -->
    </div>

</template>

<script>
// @ is an alias to /src
import { mapMutations, mapState } from "vuex";
import {PCLoginAPI} from "../api/api"



export default {
    name: 'HomeView',
    async created(){
        // 拿code
    console.log("code",this.$route.query.code);
    // 拿到code发送请求
    let myCode=this.$route.query.code;
    // 拿凑得换取token
    if(myCode){
    let res=await PCLoginAPI({code:myCode});
    console.log("res",res);
    if(res.data.code==0){
           alert("登录成功")
        // 存token
       localStorage.setItem("x-auth-token",res.data["x-auth-token"])
    //    显示登录状态
    // 清除code
    this.$router.push("/home")
    
    }else if(res.data.code==400){
         alert("重新扫码")
    }else if(res.data.code==407){
        alert("再次扫码登陆")
    }   
    }
    
    },
  
    computed:{
        ...mapState({
            isShowLoginModel:state=>state.isShowMdel.isShowLoginModel,
            isLoginStatus:state=>state.loginStatus.isLoginStatus
        })
    },
    methods:{
       ...mapMutations({
        changeIsShowLoginModel:"isShowModel/changeIsShowLoginModel",
       

       })
    }
   
}
</script>

<style lang="less" scoped>
.head {
    height: 40px;
    background: #242B39;
    margin-bottom: 14px;
}

.warp {
    height: 100%;
    width: 73%;
    // background-color: #cfc;
    margin: auto;


}

.head-in {
    display: flex;
    justify-content: space-between;

    .text {
        font-size: 14px;
        font-family: SourceHanSansSC;
        font-weight: 300;
        color: #FFFEFE;
        line-height: 40px;
    }

    .head-r {
        color: white;
        display: flex;
        line-height: 40px;

        &.login {
            background: #0A328E;
            display: flex;
            width: 124px;
            justify-content: center;

        }
        &.cart-btn {
        width: 124px;
        height: 40px;
        background: #0a328e;
        text-align: center; 
        img{
          width: 20px;
          height: 19px;
          vertical-align: middle;
        }
        span{
          margin: 0 8px;
        }
        strong{
          width: 22px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          border-radius: 50%;
          background-color: #fd604d;
        }
      }

        div {
            margin-left: 12px;
        }

        .img {
            display: flex;
            align-items: center;

            img {
                border-radius: 50%;

            }
        }




    }
}




* {
    margin: 0px;
    padding: 0px;
}
</style>
